<!-- 房屋普查数据统计分析 -->
<template>
    <p class="change" @click="changeType">切换</p>
    <div class="assy">
        <div class="assy-inner">
            <div class="assy-item" @click="switchTab('area')">
                <span :class="{ active: isActive1, 'assy-item-title': isActive }">面积</span>
            </div>
            <div class="assy-item" @click="switchTab('buildings')">
                <span :class="{ active: isActive2, 'assy-item-title': isActive }">栋数</span>
            </div>
        </div>
        <!-- 面积 -->
        <div v-show="isActive1" style="height: 470px">
            <div v-show="curType == '0'">
                <span class="assy-title">建筑类型</span>
                <div id="myAreaChart1" ref="myAreaChart1" class="myAreaChart1"></div>
                <div id="myAreaChart2" ref="myAreaChart2" class="myAreaChart1"></div>
            </div>
            <div v-show="curType == '1'">
                <div id="myAreaChart3" ref="myAreaChart3" class="myAreaChart2"></div>
                <div id="myAreaChart4" ref="myAreaChart4" class="myAreaChart2"></div>
                <div id="myAreaChart5" ref="myAreaChart5" class="myAreaChart2"></div>
            </div>
        </div>
        <!-- 栋数 -->
        <div v-show="isActive2" style="height: 470px">
            <div v-show="curType == '0'">
                <span class="assy-title">建筑类型</span>
                <div id="myBuildingsChart1" ref="myBuildingsChart1" class="myBuildingsChart1"></div>
                <div id="myBuildingsChart2" ref="myBuildingsChart2" class="myBuildingsChart1"></div>
            </div>
            <div v-show="curType == '1'">
                <div id="myBuildingsChart3" ref="myBuildingsChart3" class="myBuildingsChart2"></div>
                <div id="myBuildingsChart4" ref="myBuildingsChart4" class="myBuildingsChart2"></div>
                <div id="myBuildingsChart5" ref="myBuildingsChart5" class="myBuildingsChart2"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, defineProps, nextTick } from 'vue';
import * as echarts from 'echarts';
import Highcharts from 'highcharts' //必须引入
import Highcharts3D from 'highcharts/highcharts-3d' // 3D必须有引入
Highcharts3D(Highcharts)
import { getGeneralSurvey } from '@/api/housingFacilities.js';
const props = defineProps({
    datas: {
        default: {},
        type: Object,
    },
});
// 当前实例
const proxy = getCurrentInstance();

const isActive = ref(true);
const isActive1 = ref(true);
const isActive2 = ref(false);
let curType = ref('0')
const buildingsArr1 = ref([])
const buildingsColors1 = ref([])
const buildingsArr2 = ref([])
const buildingsColors2 = ref([])
const buildingsArr = ref([])
const buildingsColors = ref([])
const buildingsArr3 = ref([])
const buildingsColors3 = ref([])
const buildingsArr4 = ref([])
onMounted(() => {
    getAreaChart()
    getBuildingsChart()
});
const switchTab = (val) => {
    if (val == 'area') {
        isActive2.value = false
        isActive1.value = true
    } else if (val == 'buildings') {
        isActive1.value = false
        isActive2.value = true
    }
    // curType.value = '0'
};
const changeType = () => {
    curType.value = curType.value == '0' ? '1' : '0'
}
// 栋数图表
buildingsArr1.value = [
    { name: '砖(砌块)混', value: 5 },
    { name: '轻(钢)装配式', value: 15 },
    { name: '混凝土结构(框架,剪力墙)', value: 5 },
    { name: '混凝土装配式', value: 15 },
    { name: '砖木', value: 23 },
    { name: '土木', value: 7 },
    { name: '石木', value: 16 },
    { name: '木结构', value: 4 },
    { name: '混杂结构(砖/砖砌/土/石)', value: 10 },
    { name: '窑洞', value: 10 },
    { name: '其他', value: 10 },
];
buildingsColors1.value = ['#FFB35B', '#8BB434', '#ED5385', '#8BB434', '#EB862A', '#4655F0', '#9954EF', '#3AC2EA', '#F24644', '#4986D6', '#F24644']
buildingsArr.value = [
    { name: '砖混', value: 5 },
    { name: '钢筋混凝土', value: 15 },
    { name: '地层混凝土柱-上部砖混', value: 15 },
    { name: '砖木', value: 23 },
    { name: '钢结构', value: 4 },
    { name: '木结构', value: 4 },
    { name: '其他', value: 10 },
];
buildingsColors.value = ['#FFB35B', '#8BB434', '#ED5385', '#8BB434', '#EB862A', '#4655F0', '#9954EF']
buildingsArr2.value = [
    { name: '70s以前', value: 16 },
    { name: '70s', value: 25 },
    { name: '80s', value: 13 },
    { name: '90s', value: 16 },
    { name: '00s', value: 10 },
    { name: '10s', value: 20 },
];
buildingsColors2.value = ['#FFB35B', '#8BB434', '#ED5385', '#8BB434', '#EB862A', '#4655F0']
buildingsArr3.value = [
    { name: '抗震设防能力不足', value: 16 },
    { name: '基本符合抗震设防要求', value: 25 },
    { name: '未抗震设防', value: 13 },
];
buildingsColors3.value = ['#8BB434', '#FFB35B', '#4655F0']
buildingsArr4.value = [
    { name: '未设防', value: 16 },
    { name: '6度', value: 25 },
    { name: '7度', value: 13 },
    { name: '8度', value: 16 },
    { name: '9度', value: 10 },
    { name: '10度', value: 20 },
];

// 栋数图表
const getBuildingsChart = () => {
    getGeneralSurvey({ mark: "1" }).then((res) => {
        let buildArr = [], buildArr1 = [], buildArr2 = [], buildArr3 = [], buildArr4 = [];
        res.data[0].map((item, index) => {
            item.name = buildingsArr1.value[index].name;
            item.value = item.proportion
        })
        res.data[1].map((item, index) => {
            item.name = buildingsArr.value[index].name;
            item.value = item.proportion
        })
        buildArr = res.data[0];
        buildArr1 = res.data[1];
        renderChart(proxy.refs.myBuildingsChart1, '乡村', buildArr, buildingsColors1.value, 6)
        renderChart(proxy.refs.myBuildingsChart2, '城镇', buildArr1, buildingsColors.value, 10)
        getGeneralSurvey({ mark: "3" }).then((res) => {
            res.data[2].map((item, index) => {
                item.name = buildingsArr2.value[index].name;
                item.value = item.proportion
            })
            res.data[3].map((item, index) => {
                item.name = buildingsArr3.value[index].name;
                item.value = item.proportion
            })
            res.data[4].map((item, index) => {
                item.name = buildingsArr4.value[index].name;
                item.value = item.proportion
            })
            buildArr2 = res.data[2];
            buildArr3 = res.data[3];
            buildArr4 = res.data[4];
            renderChart(proxy.refs.myBuildingsChart3, '建筑年代', buildArr2, buildingsColors2.value, 35)
            renderChart(proxy.refs.myBuildingsChart4, '抗震设防情况', buildArr3, buildingsColors3.value, 35)
            renderChart(proxy.refs.myBuildingsChart5, '抗震设防烈度', buildArr4, buildingsColors2.value, 35)
        });
    });
}

// 面积图表
const getAreaChart = () => {
    getGeneralSurvey({ mark: "0" }).then((res) => {
        let buildArr = [], buildArr1 = [], buildArr2 = [], buildArr3 = [], buildArr4 = [];
        res.data[0].map((item, index) => {
            item.name = buildingsArr1.value[index].name;
            item.y = item.proportion
        })
        res.data[1].map((item, index) => {
            item.name = buildingsArr.value[index].name;
            item.y = item.proportion
        })
        buildArr = res.data[0];
        buildArr1 = res.data[1];
        render3dChart(proxy.refs.myAreaChart1, '乡村', buildArr, buildingsColors1.value)
        render3dChart(proxy.refs.myAreaChart2, '城镇', buildArr1, buildingsColors.value)
        getGeneralSurvey({ mark: "2" }).then((res) => {
            let buildArr2 = [], buildArr3 = [], buildArr4 = [];
            res.data[2].map((item, index) => {
                item.name = buildingsArr2.value[index].name;
                item.y = item.proportion
            })
            res.data[3].map((item, index) => {
                item.name = buildingsArr3.value[index].name;
                item.y = item.proportion
            })
            res.data[4].map((item, index) => {
                item.name = buildingsArr4.value[index].name;
                item.y = item.proportion
            })
            buildArr2 = res.data[2];
            buildArr3 = res.data[3];
            buildArr4 = res.data[4];
            nextTick(() => {

                render3dChart2(proxy.refs.myAreaChart3, '建筑年代', buildArr2, buildingsColors2.value)
                render3dChart2(proxy.refs.myAreaChart4, '抗震设防情况', buildArr3, buildingsColors3.value)
                render3dChart2(proxy.refs.myAreaChart5, '抗震设防烈度', buildArr4, buildingsColors2.value)
            })
        });
    });
}
/*
    渲染图表
    params: {
        elem: 标签DOM,
        title: 标题,
        data: 数据,
        colors: 颜色列表,
        itemGap: 图注间距,
    }
*/
const renderChart = (elem, title, data, colors, itemGap) => {
    let myChart = echarts.init(elem);
    const option = {
        // 标题
        title: {
            text: title,
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 'normal',
            }
        },
        // 位置
        grid: {
            left: '5%',        // 设置图在左侧留白
            right: '4%',     // 设置图在右侧留白
            bottom: '4%',
            containLabel: false // 包含坐标轴标签在内
        },
        // 图注
        legend: {
            orient: 'vertical',  // 设置图例垂直排列
            right: '0',         // 设置图例在右侧
            top: 'center',        // 设置图例在垂直方向上居中
            textStyle: {
                color: "#fff",
                padding: [0, 2]//文字与图形之间的左右间距
            },
            itemWidth: 6,    // 设置图例项的宽度
            itemHeight: 6,    // 设置图例项的高度
            itemGap: itemGap,
        },
        color: colors, // 设置饼状图的颜色
        series: [
            {
                type: 'pie',
                radius: ['50%', '60%'],
                center: ['25%', '48%'], // 设置饼状图的中心位置，向右移动一定的距离
                label: {
                    formatter: '{c}%',
                    show: true,
                    color: '#46FFFF', // 设置标签颜色
                },
                emphasis: {
                    label: {},
                },
                labelLine: {
                    show: false,
                    length: 6,
                    length2: 8,
                },
                data: data,
            },
        ]
    };
    option && myChart.setOption(option);
}
/*
    渲染3d图表
    params: {
        elem: 标签DOM,
        title: 标题,
        data: 数据,
        colors: 颜色列表,
        itemGap: 图注间距,
    }
*/
// 建筑类型
const render3dChart = (elem, title, data, colors) => {
    const options = {
        colors: colors,
        chart: {
            type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: null,
            animation: false,
            options3d: {
                enabled: true,
                alpha: 50,
                beta: 0,
                viewDistance: 40 //定义图表的浏览长度
            },
            backgroundColor: 'rgba(0,0,0,0)',
            reflow: true,
            height: '215px'
        },
        credits: {
            enabled: false,
        },
        accessibility: {
            enabled: false,
        },
        // 标题
        title: {
            align: 'left',
            text: title,
            style: {
                'fontSize': '16px',
                'color': '#fff',
                'fontWeight': 'normal'
            },
        },
        plotOptions: {
            pie: {
                innerSize: 50,
                depth: 20,
                allowPointSelect: false,
                cursor: 'pointer',
                dataLabels: {
                    showInLegend: true,
                    enabled: true,
                    format: '{point.y}%',
                    style: {
                        color: '#46FFFF',
                        fontSize: '14px',
                        textOutline: 'none',
                    },
                    connectorWidth: 0,
                    distance: 0,
                }
            }
        },
        series: [{
            type: 'pie',
            hoverAnimation: true,
            size: '90%',
            startAngle: 0,
            showInLegend: true,
            colorByPoint: true,
            data: data,
        }],
        // 图例
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            alignColumns: true,
            itemStyle: {
                'fontSize': '12px',
                'color': '#fff'
            },
            itemHoverStyle: {
                'color': '#fff'
            },
            labelFormatter: function () {
                return this.name;
            },
            x: 0, //间隔x轴的间隔
            y: 0, //间隔Y轴的间隔
            symbolRadius: 0,
            symbolWidth: 6,
            symbolHeight: 6,
            maxHeight: 230,
            navigation: {
                activeColor: '#39F',
                animation: true,
                inactiveColor: '#595959',
                style: {
                    fontWeight: 'bold',
                    color: '#fff',
                    fontSize: '12px'
                }
            }
        },
        tooltip: {
            enabled: false,
        }
    };
    Highcharts.chart(elem, options);
}
const render3dChart2 = (elem, title, data, colors) => {
    const options = {
        colors: colors,
        chart: {
            type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: null,
            animation: false,
            options3d: {
                enabled: true,
                alpha: 50,
            },
            height: '155px',
            // height: 170,
        },
        credits: {
            enabled: false,
        },
        accessibility: {
            enabled: false,
        },
        // 标题
        title: {
            align: 'left',
            text: title,
            style: {
                'fontSize': '16px',
                'color': '#fff',
                'fontWeight': 'normal'
            },
        },
        plotOptions: {
            pie: {
                innerSize: 30,
                depth: 20,
                allowPointSelect: false,
                cursor: 'pointer',
                center: ["37%", "33%"],
                dataLabels: {
                    showInLegend: true,
                    enabled: true,
                    format: '{point.y}%',
                    style: {
                        color: '#46FFFF',
                        fontSize: '14px',
                        textOutline: 'none',
                    },
                    connectorWidth: 0,
                    distance: 2,
                },
            }
        },
        series: [{
            type: 'pie',
            hoverAnimation: true,
            size: '100%',
            startAngle: 0,
            showInLegend: true,
            colorByPoint: true,
            data: data,
        }],
        // 图例
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            itemWidth: 140,
            itemStyle: {
                'fontSize': '12px',
                'color': '#fff'
            },
            itemHoverStyle: {
                'color': '#fff'
            },
            labelFormatter: function () {
                return this.name;
            },
            x: 0, //间隔x轴的间隔
            y: 0, //间隔Y轴的间隔
            symbolWidth: 6,
            symbolHeight: 6,
        },
        tooltip: {
            enabled: false,
        }
    };
    Highcharts.chart(elem, options);
}
const resize = () => {
    let myChart = echarts.init(document.getElementById("myBuildingsChart1"));
    myChart.resize()
}
onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
})
</script>
<style lang="scss" scoped>
.change {
    position: relative;
    top: -70px !important;
    right: 0;
    text-align: right;
    padding: 0 10px;
    color: #46ffff;
    margin: 0;

    &:hover {
        cursor: pointer;
    }
}

.assy {
    margin-top: -60px;

    &-title {
        color: #fff;
        font-size: 16px;
        padding-left: 12px;
    }

    .assy-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    &-item {
        width: 80px;
        height: 30px;
        background-size: 100% 100%;
        background-image: url('@/assets/images/dzzh/bg1.png');
        margin-top: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        line-height: 29px;

        &:nth-child(2) {
            margin-left: 20px;
            margin-right: 20px;
        }

        span {
            display: block;
            color: #418dfd;
        }

        .active {
            color: #ffffff;
            background-size: 100% 100%;
            background-image: url(/src/assets/images/dzzh/bg2.png);
        }

        &-title {
            display: inline-block;
            width: 100%;
            color: #46ffff;
            font-size: 14px;
            text-align: center;
        }
    }

    .myBuildingsChart1 {
        width: 430px;
        height: 217px;
        font-size: 14px;
        margin: 5px auto 15px;
        background: url('@/assets/images/housing/buildings.png') no-repeat;
        background-position: -1% 0%;

        &::after {
            content: '';
            display: block;
            border-bottom: 1px dashed #475ADB;
            padding-bottom: 5px;
        }

        &:last-child {
            &::after {
                display: none;
            }
        }
    }

    .myBuildingsChart2 {
        width: 410px;
        height: 160px;
        font-size: 14px;
        margin: 0 auto 5px;
        background: url('@/assets/images/housing/buildings.png') no-repeat;
        background-position: 8% 50%;
        background-size: 40%;

        &::after {
            content: '';
            display: block;
            border-bottom: 1px dashed #475ADB;
        }

        &:last-child {
            &::after {
                display: none;
            }
        }
    }

    .myAreaChart1 {
        width: 430px;
        height: 217px;
        margin: 5px auto 10px;
        background: url('@/assets/images/housing/area.png') no-repeat;
        background-position: 11% 18px;

        &::after {
            content: '';
            display: block;
            border-bottom: 1px dashed #475ADB;
        }

        &:last-child {
            &::after {
                display: none;
            }
        }
    }

    .myAreaChart2 {
        width: 410px;
        height: 160px;
        margin: 0 auto 5px;
        background: url('@/assets/images/housing/area.png') no-repeat;
        background-position: 12% 62%;
        background-size: 30%;

        &::after {
            content: '';
            display: block;
            border-bottom: 1px dashed #475ADB;
        }

        &:last-child {
            &::after {
                display: none;
            }
        }
    }
}

:deep(.el-carousel__indicators) {
    width: 200px;
    height: 5px;
    margin: 12px auto;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

:deep(.el-carousel__indicator) {
    display: block;
    padding: 0;
}

:deep(.el-carousel__indicators--outside button) {
    width: 100px;
    height: 5px;
    background: rgba(71, 90, 219, 1);
    opacity: 1;
}

:deep(.el-carousel__indicator.is-active button) {
    background: #46ffff;
    border-radius: 5px;
}
</style>
  